<template lang="html">
  <div class="contain">
    <group>
      <cell title="查看已签署合同" is-link link="/Signed"></cell>
    </group>
    <group>
      <cell title="修改个人信息" is-link :border-intent="false"
      :arrow-direction="showDetail ? 'up' : 'down'"
      @click.native="showDetail = !showDetail"></cell>
      <template v-if="showDetail">
        <cell title="修改手机号" :border-intent="false" is-link link="/resetPhone"></cell>
        <cell title="修改邮箱" :border-intent="false" is-link link="/resetEmail" v-if="userType!=='individual'"></cell>
        <cell title="修改密码" :border-intent="false" is-link link="/resetPassword"></cell>
      </template>
    </group>
    <group>
      <cell title="注销" @click.native="loginOut"></cell>
    </group>
  </div>
</template>

<script>
import { Cell, Group } from 'vux'
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      showDetail: false
    }
  },
  created () {
    this.setSelectFooter(false)
    this.setFooter(true)
    this.setShowBack(false)
    this.setBackground(false)
  },
  computed: {
    userType () {
      return localStorage.userType
    }
  },
  methods: {
    loginOut () {
      localStorage.clear()
      this.setToken('')
      this.setContract('')
      this.setLogin(true)
    },
    ...mapMutations({
      setSelectFooter: 'setSelectFooter',
      setFooter: 'setFooter',
      setShowBack: 'setShowBack',
      setLogin: 'setPopup',
      setToken: 'setToken',
      setContract: 'setContract',
      setBackground: 'setBackground'
    })
  },
  components: {
    Cell,
    Group
  }
}
</script>

<style lang="css">
</style>
